<!--
 * @Author: QUAN
 * @Date: 2021-10-29 15:36:16
 * @LastEditTime: 2021-11-05 16:30:44
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \mutong-ketang-pc-mis\src\views\Activity\CompDetail.vue
-->
<template>
  <div class="comp-detail">
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ name: 'ActivityCompList' }">
        活动列表
      </el-breadcrumb-item>
      <el-breadcrumb-item>
        {{ editMode ? '抽奖组件详情' : '新增抽奖组件' }}
      </el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 内容 -->
    <el-form
      :model="info"
      label-width="110px"
      :rules="compRule"
      label-position="right"
      ref="compForm"
    >
      <h3>基础配置</h3>
      <div class="card-box">
        <el-form-item prop="prompt" label="抽奖引导文案">
          <el-input
            v-model="info.prompt"
            placeholder="填写参与抽奖的引导文案，例如：评论活动参与抽奖"
          ></el-input>
        </el-form-item>
        <el-form-item prop="uid" label="对接账号">
          <el-input v-model="info.uid" placeholder="填写对接账号的uuid"></el-input>
        </el-form-item>
        <el-form-item prop="endTime" label="开奖日期">
          <el-date-picker
            v-model="info.endTime"
            type="datetime"
            placeholder="选择开奖日期"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
          ></el-date-picker>
        </el-form-item>
        <el-form-item prop="shareImage" label="分享海报">
          <el-row>
            <upload-resource
              is-public
              @upload="(img) => $set(info, 'shareImage', img.url)"
              :folder="'actImg' + '/' + imgDate"
            ></upload-resource>
          </el-row>
          <el-row v-if="info.shareImage" class="q-top">
            <img style="max-height: 150px;" :src="info.shareImage" alt="" />
          </el-row>
          <el-button
            @click="$set(info, 'shareImage', '')"
            class="q-top"
            type="danger"
            v-if="info.shareImage"
          >
            删除图片
          </el-button>
        </el-form-item>
      </div>
      <h3>奖品配置</h3>
      <div class="card-box">
        <el-form-item prop="rewards" label="抽奖奖品">
          <upload-resource
            is-public
            @upload="uploadImg"
            :folder="'actImg' + '/' + imgDate"
            :multiple="true"
          ></upload-resource>
        </el-form-item>
        <el-row class="img-list">
          <div v-for="(item, index) in info.rewards" :key="index" class="img-oper">
            <img :src="item.image" alt="" />
            <div class="oper">
              <i class="el-icon-delete" @click="del(index)"></i>
            </div>
            <el-form-item
              label-width="80px"
              label="奖品名称"
              :prop="'rewards.' + index + '.title'"
              :rules="[
                {
                  required: true,
                  message: '奖品名称不能为空',
                  trigger: 'blur',
                },
                { min: 1, max: 15, message: '长度在 1 到 15 个字符', trigger: 'blur' },
              ]"
            >
              <el-input v-model="item.title" placeholder="奖品名称"></el-input>
            </el-form-item>
          </div>
        </el-row>
      </div>
      <p class="button-center">
        <el-button type="primary" @click="save" :loading="saveLoading">保存</el-button>
      </p>
    </el-form>
  </div>
</template>
<script>
  import EditMixins from 'mixins/Edit';
  import { FormRuleConf } from '@/config';
  import UploadResource from 'comp/UploadResource';
  export default {
    mixins: [EditMixins],
    data() {
      return {
        // 验证规则
        ...FormRuleConf.Comp,
        // loading
        saveLoading: false,
        // 暂时存储返回的id
        myId: '',
        // 保存奖品配置需要的id
        lotteryId: '',
      };
    },
    components: {
      UploadResource,
    },
    computed: {
      // 生成时间文件夹
      imgDate: function() {
        return this.dayjs().format('YYYY-MM-DD');
      },
    },
    created() {
      // 要这里初始化一下,不然会出问题
      this.$set(this.info, 'rewards', []);
    },
    mounted() {},
    methods: {
      // 删除图片
      del(delIndex) {
        this.info.rewards = this.info.rewards.filter((item, index) => {
          return index !== delIndex;
        });
      },

      // 上传图片
      uploadImg(img) {
        if (!this.info.rewards) {
          this.$set(this.info, 'rewards', []);
        }
        let temp = {};
        this.$set(temp, 'image', img.url);
        this.$set(temp, 'title', '');
        this.$set(this.info.rewards, this.info.rewards.length, temp);
      },

      // 得到数据
      getInfo() {
        if (!this.id || this.$route.name != 'ActivityCompDetail' || this.infoGetting) return;
        this.infoGetting = true;
        this.$service
          .SaleLotteryDetail({ id: this.id })
          .then((res) => {
            this.info = { ...res };
          })
          .finally(() => {
            this.infoGetting = false;
          });
      },

      // 保存基础配置
      save() {
        // 暂时存储返回的id
        if (this.saveLoading) return;
        this.$refs.compForm.validate((valid) => {
          if (valid) {
            this.saveLoading = true;
            this.$service.SaleLotterySave(this.info, JSON_HEADER).then((res) => {
              this.myId = res.id;
              this.lotteryId = res.lotteryId;
              this.saveRewoard();
            });
          }
        });
      },

      // 保存奖品配置
      saveRewoard() {
        // 处理数据
        this.info.rewards.forEach((item) => {
          item.lotteryId = this.lotteryId;
        });
        this.$service
          .SaleLotterySaveReward({ rewards: this.info.rewards,lotteryId:this.lotteryId }, JSON_HEADER)
          .then((res) => {
            this.saveLoading = false;
            this.$message.success('保存成功');
            this.$tabs.open({
              name: 'ActivityCompDetail',
              params: { id: this.myId },
            });
          });
      },
    },
  };
</script>
<style lang="less" scoped>
  .comp-detail {
    .button-center {
      text-align: center;
    }

    h3 {
      color: #409eff;
    }

    .card-box {
      background-color: #eee;
      border: 1px solid #eee;
      padding: 20px;
      margin: 10px 0px;
      border-radius: 6px;
    }

    .q-top {
      margin: 10px 0px;
    }

    .img-list {
      display: flex;
    }

    // 奖品图片list
    .img-oper {
      margin-right: 20px;
      position: relative;
      text-align: center;
      img {
        height: 200px;
        width: 150px;
        margin-bottom: 10px;
        display: block;
        margin-left: 50%;
        transform: translateX(-50%);
      }
      .oper {
        text-align: center;
        margin-bottom: 10px;
        i {
          font-size: 20px;
          color: #f56c6c;
        }
      }
    }
  }
</style>
